<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  value="Cliente" update="@form" immediate="true"/>
                </div>
            </h:form>

            <p:panel header="Principal - Cliente">
                <table style="min-height:500px; width: 100%">
                    <tr>
                        <td style="width: 200px; vertical-align:top;">
                            <ui:include src="menuPessoa.xhtml"/>
                        </td>
                        <td style="vertical-align:top;">
                            <h:form id="index_form" acceptcharset="utf-8"> 
                                <p:dataTable id="pessoaTable" var="p" value="#{managerVisualizarPessoa.pessoas}" 
                                             paginator="true" rows="5"
                                             paginatorPosition="bottom"
                                             paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                             rowsPerPageTemplate="5,10,15">   >  

                                    <f:facet name="header">  
                                        Ultimos Clientes Cadastrados
                                    </f:facet>
                                    <p:column style="width:16px">  
                                        <p:rowToggler />  
                                    </p:column>
                                    <p:column style="width:200px;">  
                                        <f:facet name="header" >   
                                            Nome
                                        </f:facet>  
                                        <h:outputText value="#{p.nome}"  />  
                                    </p:column>
                                    <p:column style="width:400px;">  
                                        <f:facet name="header" >   
                                            Endereco
                                        </f:facet>  
                                        <h:outputText value="#{p.endereco.tipo_logradouro.toString().toLowerCase()} #{p.endereco.logradouro.toString().toLowerCase()}
                                                      #{p.endereco.numero}, Bairro #{p.endereco.bairro} #{p.endereco.cep eq '' ? '': ', CEP'} #{p.endereco.cep}

                                                      " />  
                                    </p:column>
                                    <p:column style="width:100px;">  
                                        <f:facet name="header" >   
                                            Contato
                                        </f:facet>  
                                        <h:outputText value="#{p.endereco.celular}" />
                                    </p:column>
                                    <p:column style="width:75px;">  
                                        <f:facet name="header">  
                                            <h:outputText value="Opções" />   
                                        </f:facet>
                                        <p:commandButton  icon="editar" actionListener="#{managerEditarPessoa.redirect('editarPessoa.xhtml', p)}" update="@form"/> 
                                        <p:commandButton  icon="view" actionListener="#{managerVisualizarPessoa.redirect('visualizarPessoa.xhtml',p)}" update="@form"/>   

                                    </p:column>
                                    <p:rowExpansion >  
                                        <h:outputText value="#{p.cpf eq null ? 'CNPJ:' : 'CPF:'}" style="font-weight:bold;" />  
                                        <h:outputText value="#{p.cpf eq null ? p.cnpj : p.cpf}" />  

                                        <h:outputText value="#{p.endereco.telefone eq '' ? '' : ' FONE: '}" style="font-weight:bold;" />  
                                        <h:outputText value="#{p.endereco.telefone eq '' ? '' : p.endereco.telefone}" />

                                        <h:outputText value="#{p.endereco.telefone eq '' ? '' : ' CELULAR: '}" style="font-weight:bold;"/> 
                                        <h:outputText value="#{p.endereco.celular eq '' ? '' : p.endereco.celular}" />  


                                    </p:rowExpansion> 
                                </p:dataTable> 
                            </h:form>
                        </td>
                    </tr>
                </table>
            </p:panel>

        </ui:define>
    </ui:composition>
</html>